<template>
  <div class="manage">
    <div class="form-search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="设备名称">
          <el-input
            v-model="searchForm.eqpName"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="操作类型">
          <el-select
            v-model="searchForm.operType"
            placeholder="请选择操作类型"
            clearable
          >
            <el-option
              v-for="op in oprTypeDicts"
              :label="op.label"
              :value="op.value"
              :key="op.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-data" v-loading="loading">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="50" :index="getIndex">
        </el-table-column>
        <el-table-column prop="eqpName" label="设备名称" width="180">
        </el-table-column>
        <el-table-column prop="operTypeLabel" label="操作类型" width="180">
          <template v-slot="{ row }">
            <span style="color: red"
              >{{ row.operType }} - {{ row.operTypeLabel }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="operTime"
          label="操作时间"
          width="180"
          :formatter="dateFmt"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        v-bind="pageData"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dateFmt from "../utils/date-formatter";

export default {
  data() {
    return {
      loading: true,
      searchForm: { eqpName: "", operType: null },
      oprTypeDicts: [],
      tableData: [],
      pageData: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
    };
  },

  created() {
    this.getTableData();
    this.$http.get("sys/sysDictType/getEnum/command_type").then(({ data }) => {
      this.oprTypeDicts = data.data.dataList;
    });
  },

  methods: {
    onSubmit() {
      this.pageData.currentPage = 1;
      this.getTableData();
    },

    handleSizeChange(pageSize) {
      this.pageData.pageSize = pageSize;

      this.getTableData();
    },

    handleCurrentChange(pageNo) {
      this.pageData.currentPage = pageNo;
      this.getTableData();
    },

    getTableData() {
      this.loading = true;
      this.$http
        .post(
          "eqpOperRecord/manage/getEqpOperRecord",
          JSON.stringify({
            query: {
              eqpName: this.searchForm.eqpName,
              operType: this.searchForm.operType || null,
            },
            pageSize: this.pageData.pageSize,
            pageNo: this.pageData.currentPage,
            sort: { oper_time: "desc" },
          }),
          {
            headers: {
              "Content-Type": "application/json; charset=UTF-8",
            },
          }
        )
        .then(({ data }) => {
          this.tableData = data.data.list;
          this.pageData.total = data.data.count;
          this.pageData.currentPage = data.data.pageNo;
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    getIndex(i) {
      return (this.pageData.currentPage - 1) * this.pageData.pageSize + i + 1;
    },
    dateFmt(row, column, cellValue) {
      return dateFmt(new Date(cellValue), "yyyy-MM-dd");
    },
  },
};
</script>

<style scoped lang="scss">
.manage {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
}

.form-search {
  height: 65px;
}
</style>
